
<template>
  <div id="app" class="h-screen w-full overflow-hidden">
    <router-view v-slot="{ Component }">
      <transition :name="transitionName" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const transitionName = ref('fade')

watch(() => route.path, (newPath, oldPath) => {
  const routes = ['/chats', '/contacts', '/discover', '/profile']
  const newIndex = routes.indexOf(newPath)
  const oldIndex = routes.indexOf(oldPath || '')
  
  if (newIndex !== -1 && oldIndex !== -1) {
    transitionName.value = newIndex > oldIndex ? 'slide-left' : 'slide-right'
  } else {
    transitionName.value = 'fade'
  }
})
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s ease;
}

.slide-left-enter-from {
  transform: translateX(100%);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-from {
  transform: translateX(-100%);
}

.slide-right-leave-to {
  transform: translateX(100%);
}
</style>
